import { Component, OnInit } from '@angular/core';
import { VolumeService } from 'src/app/service/volume.service';

@Component({
    selector: 'app-statistic',
    templateUrl: './statistic.component.html',
    styleUrls: ['./statistic.component.scss'],
})
export class StatisticComponent implements OnInit {
    isopen = false;
    isopenMonth = false;
    selectYear = '';
    // TODO 暂不支持季节
    // timeType.value = ['年', '季', '月']
    timeType = [
        {
            label: '年',
            value: '年',
        },
        {
            label: '月',
            value: '月',
        },
    ];
    selectTimeType = '年';
    /* const seasons = ref(['春', '夏', '秋', '冬']) */
    months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    /* const selectSeason = ref() */
    x: any[] = [];
    y: any[] = [];
    selectMonth = '';
    selectValue = '';
    totalVolume: any;
    statistics: any;
    data: any;
    chartOptions: any;
    config: any;
    chartData:any; 
    updateChartOptions() {
        if (this.config.dark) this.applyDarkTheme();
        else this.applyLightTheme();
    }

    applyDarkTheme() {
        this.chartOptions = {
            plugins: {
                legend: {
                    labels: {
                        color: '#ebedef',
                    },
                },
            },
            scales: {
                xAxes: {
                    ticks: {
                        color: '#ebedef',
                    },
                    grid: {
                        color: 'rgba(160, 167, 181, .3)',
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'hhhh',
                    },
                },
                yAxes: {
                    ticks: {
                        color: '#ebedef',
                    },
                    grid: {
                        color: 'rgba(160, 167, 181, .3)',
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'ddss',
                    },
                },
            },
        };
    }

    applyLightTheme() {
        this.chartOptions = {
            plugins: {
                legend: {
                    labels: {
                        color: '#495057',
                    },
                },
            },
            scales: {
                xAxes: {
                    ticks: {
                        color: '#495057',
                    },
                    grid: {
                        color: '#ebedef',
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'hhhh',
                    },
                },
                yAxes: {
                    ticks: {
                        color: '#495057',
                    },
                    grid: {
                        color: '#ebedef',
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'hhhh',
                    },
                },
            },
        };
    }
    timeChange = (value) => {
        console.log('timeChange', value);
        if (value == 0) {
            this.selectTimeType = '年';
        } /* else if (value == 1) {
          selectTimeType.value = '季'
        }  */ else {
            this.selectTimeType = '月';
        }
        console.log('selectTime:', this.selectTimeType);
    };
    monthChange = (value) => {
        let month = new Date(this.selectMonth).getMonth() + 1;
        let year = new Date(this.selectMonth).getFullYear();
        if (month < 10) {
            this.selectValue = year.toString() + '-' + '0' + month.toString();
        } else this.selectValue = year.toString() + '-' + month.toString();
        console.log('selectMonth:', this.selectValue);
    };
    yearChange = (value) => {
        let year = new Date(this.selectYear).getFullYear();
        this.selectValue = year.toString();
        console.log('selectYear:', this.selectValue);
    };
    ensureValue = () => {
        if (this.selectTimeType == '月') {
            this.selectValue = this.selectMonth;
        } else {
            this.selectValue = this.selectYear;
        }
        console.log('selectTimeType:', this.selectTimeType);
        console.log('selectValue:', this.selectValue);
    };
    formatYM() {
        var date = new Date();
        // 获取当前月份
        var nowMonth = date.getMonth() + 1;
        // 添加分隔符“-”
        var seperator = '-';
        var month;
        // 对月份进行处理，1-9月在前面添加一个“0”
        if (nowMonth >= 1 && nowMonth <= 9) {
            month = '0' + nowMonth.toString;
        }

        var nowDate = date.getFullYear() + seperator + month;
        return nowDate;
    }
    async statisticSearch() {
        console.log('selectTimeType:', this.selectTimeType);
        console.log('selectYear:', this.selectYear);
        console.log('selectMonth:', this.selectMonth);
        /* console.log('selectSeason:', selectSeason.value) */
        //this.ensureValue();
        let type;
        if (this.selectTimeType === '年') {
            type = 'year';
        } /* else if (selectTimeType.value === '季') {
      type = 'season'
    } */ else {
            type = 'month';
        }
        console.log(type);
        console.log(this.selectValue);
        const res = await this.volumeService.fetchApplicantStatisticsByTime({
            type,
            currentTime: this.selectValue,
        });
        if (res) {
            console.log('res', res);
            this.statistics = res;
            console.log('statistics', this.statistics);
            this.x = []
            this.y = []
            res.forEach((item) => {
                this.x.push(item.name)
                this.y.push(item.volume)
            });
            this.chartData= {
                labels: this.x,
                datasets: [
                    {
                        type: 'bar',
                        label: '用户用水量',
                        data: this.y,
                        fill: false,
                        backgroundColor: [
                            '#2f4860',
                            '#ff6384',
                            '#36a2eb',
                            '#cc65fe',
                            '#ffce56',
                        ],
                        borderColor: [
                            '#2f4860',
                            '#ff6384',
                            '#36a2eb',
                            '#cc65fe',
                            '#ffce56',
                        ],
                        tension: 0.4,
                    },
                ],
            };
            console.log(this.x,this.y)
        } else {
            return;
        }
    }
    constructor(private volumeService: VolumeService) {}

    async ngOnInit() {
        var myDate = new Date();
        this.selectTimeType = '年';
        this.selectYear = myDate.getFullYear().toString();
        this.selectMonth = this.formatYM();
        /* selectSeason.value = initSeason(myDate.getMonth()) */
        //console.log('init selectTimeType:', this.selectTimeType);
        //console.log('init selectMonth:', this.selectMonth);
        /* console.log('init selectSeason:', selectSeason.value) */
        //console.log('init selectYear:', this.selectYear);
        this.statisticSearch();
    }
}
